<template>
    <view class="fixed-bottom">
        <template v-if="type == 'warehouseManage'">
            <view v-for="(item, index) in operations" :key="index" :class="['operation-item', item.class]"
                @click="handleOperation(item.type)" v-if="item.permission">
                {{ item.text }}
            </view>
        </template>
        <template v-else>
            <view v-for="(item, index) in operations" :key="index" :class="['operation-item', item.class]"
                @click="handleOperation(item.type)">
                {{ item.text }}
            </view>
        </template>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from '@vue/composition-api';
const props = defineProps({
    operations: {
        type: Array,
        default: () => []
    },
    type: {
        type: String,
        default: ''  // warehouseManage:库管模块使用
    }
});

const emit = defineEmits(['operation']);

const handleOperation = (type) => {
    emit('operation', type);
};
</script>

<style lang="scss">
.fixed-bottom {
    height: 60px;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    overflow-x: auto;
    z-index: 99;
    font-size: 16px;
    display: flex;
    justify-content: flex-end;

    .operation-item {
        cursor: pointer;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: #333;
        padding: 0 20px;
        min-width: 60px;
        border-left: 1px solid #ececec;

        &:hover {
            background-color: #eee;
        }

        &:active {
            background-color: #dedede;
        }

        &.primary {
            background: #3388ff;
            color: #fff;

            &:hover {
                opacity: 0.9;
            }

            &:active {
                opacity: 0.8;
            }
        }

        &.danger {
            color: #ff0000;
        }

        &.orange {
            color: #ff9900;
        }
    }
}
</style>
